<template>
	<view>
		<view class="free-filter">
			<view class="free-filter-title" v-for="item in FileList" :key="item.id" :class='item.id==current?"active":""'   @click='changeFilter(item.id)'>
				{{item.name}}
			</view>
		</view>
		<view class="free-list">
			<view class='new-list'>
				<view class='new-list-item' v-for='item in courseList' :key='item.id'>
					<view class='new-item-img'>
						<image :src="item.courseCover"></image>
					</view>
					<view class='new-item-main'>
						<view class='new-item-title'>{{ item.courseName }}</view>
						<view class='new-item-type'>{{ courseType(item.courseLevel) }}</view>
						<view class='new-item-total'>
							<view class='new-item-price' v-if='item.discountPrice==0'>
								<view>免费</view>
							</view>
							<view class='new-item-price' v-else>
								<view>限时优惠</view>
								<view class='new-item-discountPrice'>¥ {{ item.discountPrice }}</view>
							</view>
							<view class='new-item-number'>{{ courseNumber(item.clicks) }}人学习</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {freeCourse} from '@/api/course.js'
	import { mixin } from '@/mixins/mixin.js'
	export default {
		mixins:[ mixin ],
		data() {
			return {
				current:1,
				courseList:[],
				FileList: [{
						id: 1,
						name: "综合推荐"
					},
					{
						id: 2,
						name: "最新"
					},
					{
						id: 3,
						name: "浏览最多"
					}
				],
				courseParams:{
                pageNum:1,
                pageSize:10,
                entity:{isFree:1}
            }
			}
		},
		mounted() {
			this.getCourse(this.courseParams);
		},
		methods: {
			getCourse(params) {
				freeCourse(params).then(res => {
					this.courseList = res.pageInfo.list;
				})
			},
			 //切换filter
        changeFilter( id ){
            this.current = id;
            //综合
            if( id ==1 ){
                this.courseParams.sortBy = '';
            }else if( id== 2 ){ //最新
                this.courseParams.sortBy = 'price-desc';
            }else if( id ==3 ){ //浏览最多
                this.courseParams.sortBy = 'clicks-desc';
            }
            this.getCourse( this.courseParams  );
        }
		}
	}
</script>

<style>
	.free-filter {
		display: flex;
		padding: 14rpx 0;
	}

	.free-filter-title {
		padding-left: 44rpx;
		font-size: 28rpx;
		color: #a0a4ad;
	}

	.free-list {
		padding: 14rpx;
	}

	.new-list-item {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
	}

	.new-list-item:after {
		content: '';
		position: absolute;
		bottom: -20rpx;
		margin-top: 40rpx;
		width: 100%;
		border-bottom: 1px solid #000000;
		opacity: 0.15;
	}

	.new-item-img {
		width: 237rpx;
		height: 186rpx;
		border-radius: 12rpx;
		background-color: #ccc;
	}

	.new-item-img image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	.new-item-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 186rpx;
		padding-left: 23rpx;
	}

	.new-item-title {
		font-size: 29rpx;
		font-weight: 400;
		color: #191919;
	}

	.new-item-type {
		font-size: 24rpx;
		font-weight: 400;
		color: #C5C5C5;
	}

	.new-item-total {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.new-item-price {
		display: flex;
		font-size: 21rpx;
		color: #FF4B5C;
		font-weight: 600;
	}

	.new-item-number {
		font-size: 21rpx;
		font-weight: 400;
		color: #A0A4AD;
	}

	.new-item-discountPrice {
		padding-left: 21rpx;
	}
	.active{
		font-weight: 400;
		color: #000000;
	}
</style>